<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
		<script type="text/javascript">
			$(function (){ //ready函数 文档数就绪之后执行
				$("#add").bind("click",function(){
					let div=$("<div></div>")
					let file=$("<input type='file' />")
					/* let btn=$("<button type='button' class='delete' onclick='fun()'>删除</button>") */
					let btn=$("<button type='button' class='delete'>删除</button>")
					//通过文档对象实现动态绑定
					$(document).on("click",".delete",fun)
					div.append(file)
					div.append(btn) //
					$("#con").append(div)
				})
			})	
			function fun(){
				$(event.target.parentNode).remove(); //获取正在点击的按钮的父节点,把他由dom 对象转化成jQuery 对象
			}
		</script>
	</head>
	<body>
		<h2>选择你要上传的文件：</h2>
		<div>
			<input type="file" />
			<button type="button" id="add">增加</button>
		</div>
		<div id="con"> <!-- 增加的直接写在容器中 -->
		</div>
	</body>
</html>
